<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tools/bootstrap.min.css">
    <style>
        .box {
            margin: 50px auto;
            width: 1200px;
        }

        .box>span {
            font-size: 20px;
        }

        .box>span:nth-of-type(n+2) {
            display: inline-block;
            width: 100px;
        }
        .change > span {
            display: inline-block;
            width: 100px;
        }

        .box input {
            display: inline-block;
            width: 80%;
            margin-bottom: 15px;
        }

        h1 {
            display: inline-block;
        }

        .box>button {
            width: 150px;
        }

        table {
            margin-top: 70px;
        }
        .change {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #fff;
            border: 2px solid #000;
            width: 700px;
            height: 400px;
            padding-left: 30px;
            display: none;
        }
        .change button:first-of-type {
            margin: 0 15px 0 500px;
        }
        
    </style>
</head>

<body>
    <form class="box form-horizontal">
        <h1>表单</h1>
        <span>Subtext for header</span>
        <hr>
        <span>姓名</span> <input type="text" class="form-control" name="name"> <br>
        <span>联系电话</span> <input type="text" class="form-control" name="phoneNum"> <br>
        <span>学历</span> <input type="text" class="form-control" name="degree"> <br>
        <span>年龄</span> <input type="text" class="form-control" name="age"> <br>
        <span>期望薪资</span> <input type="text" class="form-control" name="salary"> <br>
        <button class="btn btn-primary" name="save">保存</button> <button class="btn btn-default">重置</button>

        <table class="table table-striped">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                <tr>
            </thead>
            <tbody>
                <!-- 动态生成表格体 -->
            </tbody>
        </table>
        </tr>
        </tbody>
        </table>
        <!-- 修改表格 -->
        <div class="change">
            <h3>请修改信息</h3>
            <hr>
            <span>姓名</span> <input type="text" class="form-control" name="changeName"> <br>
            <span>联系电话</span> <input type="text" class="form-control" name="changePhoneNum"> <br>
            <span>学历</span> <input type="text" class="form-control" name="changeDegree"> <br>
            <span>年龄</span> <input type="text" class="form-control" name="changeAge"> <br>
            <span>期望薪资</span> <input type="text" class="form-control" name="changeSalary"> <br>
            <button class="btn btn-default" name="close">关闭</button>
            <button class="btn btn-primary" name="saveChange">保存修改</button>
            

        </div>
    </form>

    <script src="./tools/jquery.min.js"></script>
    <!-- <script src="./form.js"></script> -->
    <script src="./form.js"></script>
</body>

</html>